<template>
  <view class="quiz-container">
    <header-vue :back="true" bgColor="transparent"></header-vue>

    <view class="quiz-container-box">
      <!-- 结果弹窗 -->
      <result-popup
        v-model="showResultPopup"
        :result-data="resultData"
        @return-home="handleReturnHome"
        @view-wrong="handleViewWrongQuestions"
      />
      <!-- 题目选择 -->

      <number-selector v-model="showSelector" />
      <!-- 顶部进度条 -->

      <view class="progress-bar">
        <view class="progress-header" @click="handleInTimuClick">
          <image
            :src="IMAGE_URL+'/static/master/timu.png'"
            style="width: 32rpx; height: 32rpx"
          />
          <view class="progress-text"
            >{{ currentIndex + 1 }} / {{ totalQuestions }}</view
          >
        </view>
        <view class="progress-bg">
          <view class="progress-fill" :style="{ width: progressWidth }"></view>
        </view>
      </view>

      <!-- 题目区域 -->
      <view class="question-card">
        <view class="question-header">
          <view class="question-type" :class="currentQuestion.type">
            {{ currentQuestion.type === "single" ? "单选题" : "多选题" }}
          </view>
          <view class="question-content">{{ currentQuestion.title }}</view>
        </view>

        <!-- 选项区域 -->
        <view class="options-container">
          <view
            v-for="(option, index) in currentQuestion.options"
            :key="index"
            class="option-item"
            :class="{
              selected: isSelected(option),
            }"
            @click="selectOption(option)"
          >
            <view class="option-label">{{
              String.fromCharCode(65 + index)
            }}</view>
            <view class="option-content">{{ option.text }}</view>
          </view>
        </view>
        <!-- 底部按钮 -->
        <view class="button-container">
          <button
            class="btn prev-btn"
            v-if="currentIndex !== 0"
            @click="prevQuestion"
          >
            上一题
          </button>
          <button
            v-if="currentIndex < totalQuestions - 1"
            class="btn next-btn"
            @click="onNextQuestionClick"
          >
            下一题
          </button>
          <button v-else class="btn submit-btn" @click="submitQuiz">
            提交
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import ResultPopup from "./components/result-popup.vue";
import headerVue from "@/components/header.vue";
import NumberSelector from "./components/number-selector.vue";
import appConfig from "@/config/app.js";
//  IMAGE_URL: appConfig.IMAGE_URL,
export default {
  data() {
    return {
      IMAGE_URL: appConfig.IMAGE_URL,
      showSelector: false,
      showResultPopup: false,
      canSubmit: true,
      resultData: {
        totalQuestions: 50,
        answeredQuestions: 50,
        timeUsed: "00:00",
        totalScore: 0,
        details: [],
      },

      // 答题相关数据

      currentIndex: 0,
      totalQuestions: 3,
      userAnswers: [],

      questions: [
        {
          id: 1,
          type: "single",
          title: "厨房油污清理用什么？",
          options: [
            { id: "A", text: "将面粉撒在油污处，喷洒清水", isCorrect: false },
            {
              id: "B",
              text: "将洗洁精和白醋混合后喷洒在油污上，能有效去除油渍",
              isCorrect: true,
            },
            { id: "C", text: "小苏打具有良好的清洁效果", isCorrect: false },
            { id: "D", text: "使用专用清洁剂处理顽固油渍", isCorrect: false },
          ],
        },
        {
          id: 2,
          type: "multiple",
          title: "厨房油污清理用什么？",
          options: [
            { id: "A", text: "将面粉撒在油污处，喷洒清水", isCorrect: false },
            {
              id: "B",
              text: "将洗洁精和白醋混合后喷洒在油污上，能有效去除油渍",
              isCorrect: true,
            },
            { id: "C", text: "小苏打具有良好的清洁效果", isCorrect: true },
            { id: "D", text: "使用专用清洁剂处理顽固油渍", isCorrect: true },
          ],
        },
        {
          id: 3,
          type: "single",
          title: "洗洁精可以去除油渍？",
          options: [
            { id: "A", text: "正确", isCorrect: true },
            { id: "B", text: "错误", isCorrect: false },
          ],
        },
      ],
    };
  },
  components: {
    headerVue,
    ResultPopup,
    NumberSelector,
  },

  computed: {
    currentQuestion() {
      return this.questions[this.currentIndex] || {};
    },

    progressWidth() {
      return `${((this.currentIndex + 1) / this.totalQuestions) * 100}%`;
    },

    hasSelected() {
      const currentAnswer = this.userAnswers[this.currentIndex];
      console.log(currentAnswer, "currentAnswer");
      return currentAnswer && currentAnswer.length > 0;
    },
  },

  methods: {
    handleInTimuClick() {
      this.showSelector = true;
    },
    handleReturnHome() {
      console.log("返回首页");
      // 返回上一页
      uni.navigateBack();
    },
    handleViewWrongQuestions() {
      console.log("查看错题");
      // 跳转到错题页面
      uni.navigateTo({
        url: "/views-master/study/exam-wrong-questions",
      });
    },

    isSelected(option) {
      const currentAnswer = this.userAnswers[this.currentIndex];
      return currentAnswer && currentAnswer.includes(option.id);
    },

    selectOption(option) {
      if (this.showAnswer) return; // 已显示答案时不能选择

      const question = this.currentQuestion;
      let newAnswer = [];

      if (question.type === "single") {
        newAnswer = [option.id];
      } else {
        const currentAnswer = this.userAnswers[this.currentIndex] || [];
        if (currentAnswer.includes(option.id)) {
          newAnswer = currentAnswer.filter((id) => id !== option.id);
        } else {
          newAnswer = [...currentAnswer, option.id];
        }
      }

      this.$set(this.userAnswers, this.currentIndex, newAnswer);
    },

    prevQuestion() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
      }
    },

    onNextQuestionClick() {
      // if (!this.hasSelected) {
      //   uni.showToast({
      //     title: "请先选择答案",
      //     icon: "none",
      //   });
      //   return false;
      // }
      if (this.currentIndex < this.totalQuestions - 1) {
        this.currentIndex++;
      }
    },

    submitQuiz() {
      // 显示结果弹窗
      this.showResultPopup = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.quiz-container {
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;

  background: linear-gradient(
    180deg,
    #b5cfff 0%,
    rgba(246, 249, 255, 0.2) 30%,
    #f6f9ff 100%
  );
}
.quiz-container-box {
  flex: 1;
  box-sizing: border-box;
  width: 100%;
  overflow-y: auto;
  padding: 32rpx;
}

.progress-bar {
  margin-bottom: 60rpx;
  .progress-header {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .progress-text {
    margin-bottom: 12rpx;
    margin-left: 6rpx;

    font-family: MiSans, MiSans;
    font-weight: 500;
    font-size: 32rpx;
    color: #333333;
    text-align: center;
    font-style: normal;
    text-transform: none;
  }

  .progress-bg {
    width: 624rpx;
    height: 24rpx;
    background: #ffffff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    margin: 0 auto;

    .progress-fill {
      height: 100%;
      background: #1ca8ff;
      border-radius: 20rpx;
      transition: width 0.3s ease;
    }
  }
}

.question-card {
  background: #ffffff;
  border-radius: 40rpx 40rpx 40rpx 40rpx;
  padding: 60rpx 40rpx;
  box-sizing: border-box;
  width: 100%;
  .question-header {
    display: flex;
    align-items: center;
    margin-bottom: 60rpx;
  }

  .question-type {
    font-size: 24rpx;
    margin-right: 12rpx;
    width: 104rpx;
    height: 46rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    &.single {
      background-color: #fdeed6;
      color: #df9824;
    }

    &.multiple {
      background-color: #fdeed6;
      color: #df9824;
    }
  }

  .question-content {
    font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
    font-weight: 500;
    font-size: 32rpx;
    color: #333333;
    text-align: left;
    font-style: normal;
    text-transform: none;
  }
}

.options-container {
  .option-item {
    display: flex;
    align-items: center;
    background: #f6f6f6;
    border-radius: 32rpx 32rpx 32rpx 32rpx;
    transition: all 0.3s ease;
    position: relative;
    padding: 36rpx 28rpx;
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 40rpx;
    border: 2rpx solid #f6f6f6;
    .option-content {
      flex: 1;
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
      text-align: justified;
      font-style: normal;
      text-transform: none;
    }
    .option-label {
      margin-right: 40rpx;
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;
      text-align: center;
      font-style: normal;
      text-transform: none;
    }

    &.selected {
      border: 2rpx solid #1ca8ff;
      background-color: #fff;
      .option-content {
        font-weight: 400;
        font-size: 28rpx;
        color: #1ca8ff;
      }
      .option-label {
        font-weight: 400;
        font-size: 28rpx;
        color: #1ca8ff;
      }
    }
  }
}

.button-container {
  display: flex;
  justify-content: space-between;
  gap: 20rpx;
  margin-top: 230rpx;
  .btn {
    font-size: 32rpx;
    border: none;
    width: 560rpx;
    height: 84rpx;

    box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(51, 51, 51, 0.16);
    border-radius: 100rpx 100rpx 100rpx 100rpx;

    &.prev-btn {
      background-color: #ffab21;
      color: white;
    }

    &.next-btn,
    &.submit-btn {
      background-color: #1ca8ff;
      color: white;
    }
  }
}
</style>
